<html>
<head>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/dom-to-image/2.6.0/dom-to-image.min.js" type="application/javascript"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/FileSaver.js/2014-08-29/FileSaver.min.js" type="application/javascript"></script>

  <script type="text/javascript">
  $(function(){
      //
      $("#btn").click(function(){                    
                    
      // 下载png图片
       domtoimage.toBlob(document.getElementById('table'))
          .then(function (blob) {
              window.saveAs(blob, 'my-node.png');
          });
          });    
  })
  </script>
</head>
<body>
  <input type="button" id="btn" value="do it" />
  <h4>两行三列：</h4>
  <table id="table" border="1" style="width:200px;border-collapse: collapse;border:1px solid black;">
      <tr style="background:green;">
        <td rowspan="3">200</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr style="background:green;">
        <td rowspan="2">500</td>
        <td>600</td>
      </tr>
      <tr style="background:green;">
        <td>600</td>
      </tr>
      <tr style="background:skyblue;">
        <td rowspan="3">100</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr style="background:skyblue;">
        <td>500</td>
        <td>600</td>
      </tr>
      <tr style="background:skyblue;">
        <td>600</td>
        <td>600</td>
      </tr>
  </table>
</body>
</html>
